feat: support design tokens and paragon 23 #1588

dcoa · 2025-02-17T04:22:43Z

Warning

This PR should not be merge to master directly, it should point to master-design-tokens once the branch has been created.

Description
This PR updates frontend app learning to support CSS variables and the corresponding paragon design tokens.

Changes implemented

Replace Paragon SCSS variables with CSS variables.
Replace deprecated components (Input, Modal, +/- font-awesome icons)

Important

This PR requires a compatible version with paragon 23 of dependencies because of that the following PRs need to be merged first:

openedx-webhooks · 2025-02-17T04:22:47Z

Thanks for the pull request, @dcoa!

This repository is currently maintained by @openedx/committers-frontend-app-learning.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

bradenmacdonald · 2025-02-18T19:10:27Z

Nice, thanks! Let me know when this is ready for review.

codecov · 2025-04-14T05:01:02Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.38%. Comparing base (73406fb) to head (348c286).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1588      +/-   ##
==========================================
- Coverage   90.38%   90.38%   -0.01%     
==========================================
  Files         341      341              
  Lines        5752     5751       -1     
  Branches     1345     1382      +37     
==========================================
- Hits         5199     5198       -1     
+ Misses        536      534       -2     
- Partials       17       19       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

open-craft-grove · 2025-04-14T05:42:34Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-22T04:11:10Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-28T01:58:00Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

brian-smith-tcril

Overall this is looking wonderful!

I left a couple comments that tie into discussions on other PRs, but once we have some context on those this should be ready to merge!

brian-smith-tcril · 2025-05-06T15:29:36Z

src/courseware/course/celebration/CelebrationModal.jsx

@@ -36,7 +36,7 @@ const CelebrationModal = ({
    <StandardModal
      footerNode={(
        <ActionRow isStacked className="pb-2">
-          <Button onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>
+          <Button className="btn-primary" onClick={onClose}>{intl.formatMessage(messages.forward)}</Button>


Is this another way to handle the issue we're discussing on the authn PR (openedx/frontend-app-authn#1436 (comment))? If so, I'm thinking maybe in this case there's a way to continue to @extend by using @use instead of @import somewhere.

I'm a bit confused about this one.

We should be getting the btn-primary when we are using the primary variant of Button, which is the default variant, so it's surprising to me that btn-primary isn't showing up without being added manually like this.

brian-smith-tcril · 2025-05-06T15:30:41Z

src/courseware/course/content-tools/contentTools.scss

+    background-color: #f1f1f1 !important;
+    border: solid 1px #ddd !important;


Curious as to why this wasn't an issue before but is now.

This is similar what is happening in discuss, the button is transparent loosing the color during the hover,

Before

After

To be more specific:

The bg-color in button is associated to the variant (primary, brand, etc), by default the .btn class use a transparent and because the styles are applying to the element itself (but not the hover), the transparent get precedence over the defined styles here.

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss

brian-smith-tcril · 2025-05-06T15:34:36Z

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss

-        &:last-child .pgn_collapsible {
-            @extend .mb-0;
-        }


Just curious as to why we don't need to set margin bottom to zero here anymore

Should be there 🙈, just is a new line to add to the extend discussion.

src/generic/upgrade-notification/UpgradeNotification.scss

src/index.scss

open-craft-grove · 2025-05-07T03:41:27Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

dcoa · 2025-05-07T03:50:16Z

src/course-home/outline-tab/widgets/FlagButton.scss

-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+
+@use "~@edx/brand/paragon/overrides";


This line is causing the sandbox not deployed.

open-craft-grove · 2025-05-09T06:37:30Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Feb 17, 2025

dcoa force-pushed the dcoa/design-tokens-support branch from c51133f to 80ea053 Compare February 17, 2025 04:35

dcoa mentioned this pull request Feb 17, 2025

Update frontend-app-learning to use Design Tokens openedx/public-engineering#302

Open

itsjeyd added the core contributor PR author is a Core Contributor (who may or may not have write access to this repo). label Feb 27, 2025

dcoa force-pushed the dcoa/design-tokens-support branch from 80ea053 to 77b9712 Compare February 28, 2025 00:11

itsjeyd added the blocked by other work PR cannot be finished until other work is complete label Mar 14, 2025

brian-smith-tcril mentioned this pull request Mar 17, 2025

[BD-46] feat: added support Paragon design tokens openedx/frontend-component-header#351

Merged

itsjeyd added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed blocked by other work PR cannot be finished until other work is complete labels Apr 1, 2025

dcoa force-pushed the dcoa/design-tokens-support branch 3 times, most recently from bc40e90 to 66f4505 Compare April 14, 2025 04:43

dcoa force-pushed the dcoa/design-tokens-support branch from 96499bf to 490dcdf Compare April 14, 2025 05:01

dcoa added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Apr 14, 2025

dcoa self-assigned this Apr 14, 2025

dcoa marked this pull request as ready for review April 14, 2025 05:05

dcoa changed the title ~~[WIP] feat: support design tokens and paragon 23~~ feat: support design tokens and paragon 23 Apr 14, 2025

dcoa requested a review from brian-smith-tcril April 14, 2025 05:06

dcoa force-pushed the dcoa/design-tokens-support branch from 490dcdf to 631f420 Compare April 22, 2025 02:48

itsjeyd moved this from Waiting on Author to Ready for Review in Contributions Apr 24, 2025

itsjeyd added waiting for eng review PR is ready for review. Review and merge it, or suggest changes. and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Apr 24, 2025

dcoa force-pushed the dcoa/design-tokens-support branch from 631f420 to 464b438 Compare April 28, 2025 01:22

brian-smith-tcril reviewed May 6, 2025

View reviewed changes

This was referenced May 6, 2025

feat: support design tokens and paragon 23 openedx/frontend-app-authn#1436

Merged

feat: add design tokens support openedx/frontend-app-authoring#1758

Open

dcoa force-pushed the dcoa/design-tokens-support branch from 464b438 to f5ec395 Compare May 7, 2025 02:58

dcoa added 6 commits May 7, 2025 13:21

chore: update paragon to version 23 (design tokens)

8224e71

refactor: update styles to use css variables

3660d05

refactor: replace paragon deprecated components

0da4a38

fix: update calculator styles

346d6d6

style: fix linter spaces

5ae09bf

fix: add missing env variables and fix index breakpoint

0a7c925

dcoa force-pushed the dcoa/design-tokens-support branch from f5ec395 to 0a7c925 Compare May 7, 2025 03:25

dcoa commented May 7, 2025

View reviewed changes

fix: remove brand import in FlagButton

348c286

itsjeyd moved this from Ready for Review to In Eng Review in Contributions May 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support design tokens and paragon 23 #1588

feat: support design tokens and paragon 23 #1588

dcoa commented Feb 17, 2025 •

edited

Loading

openedx-webhooks commented Feb 17, 2025 •

edited

Loading

bradenmacdonald commented Feb 18, 2025

codecov bot commented Apr 14, 2025 •

edited

Loading

open-craft-grove commented Apr 14, 2025

open-craft-grove commented Apr 22, 2025

open-craft-grove commented Apr 28, 2025

brian-smith-tcril left a comment

brian-smith-tcril May 6, 2025

brian-smith-tcril May 8, 2025

brian-smith-tcril May 6, 2025

dcoa May 7, 2025

brian-smith-tcril May 6, 2025

dcoa May 7, 2025

open-craft-grove commented May 7, 2025

dcoa May 7, 2025

open-craft-grove commented May 9, 2025

		background-color: #f1f1f1 !important;
		border: solid 1px #ddd !important;

feat: support design tokens and paragon 23 #1588

Are you sure you want to change the base?

feat: support design tokens and paragon 23 #1588

Conversation

dcoa commented Feb 17, 2025 • edited Loading

openedx-webhooks commented Feb 17, 2025 • edited Loading

bradenmacdonald commented Feb 18, 2025

codecov bot commented Apr 14, 2025 • edited Loading

Codecov Report

open-craft-grove commented Apr 14, 2025

open-craft-grove commented Apr 22, 2025

open-craft-grove commented Apr 28, 2025

brian-smith-tcril left a comment

Choose a reason for hiding this comment

brian-smith-tcril May 6, 2025

Choose a reason for hiding this comment

brian-smith-tcril May 8, 2025

Choose a reason for hiding this comment

brian-smith-tcril May 6, 2025

Choose a reason for hiding this comment

dcoa May 7, 2025

Choose a reason for hiding this comment

brian-smith-tcril May 6, 2025

Choose a reason for hiding this comment

dcoa May 7, 2025

Choose a reason for hiding this comment

open-craft-grove commented May 7, 2025

dcoa May 7, 2025

Choose a reason for hiding this comment

open-craft-grove commented May 9, 2025

dcoa commented Feb 17, 2025 •

edited

Loading

openedx-webhooks commented Feb 17, 2025 •

edited

Loading

codecov bot commented Apr 14, 2025 •

edited

Loading